<!doctype html>
<html>
  <head>
    <title>event path</title>
    <script src="../../polymer.js"></script>
    <script src="../../tools/test/htmltest.js"></script>
    <script src="../../node_modules/chai/chai.js"></script>
  </head>
  <body>

  <x-menu-button id="menuButton">
    <div id="item1"><div id="source"></div>Item1</div>
    <div id="item2">Item2</div>
  </x-menu-button>
  
  <polymer-element name="x-selector">
    <template>
      <div id="selectorDiv">
        <content id="selectorContent"></content>
      </div>
    </template>
    <script>
      Polymer('x-selector');
    </script>  
  </polymer-element>
  
  <polymer-element name="x-menu" extends="x-selector">
    <template>
      <div id="menuDiv">
        <shadow id="menuShadow"></shadow>
      </div>
    </template>
    <script>
      Polymer('x-menu');
    </script>  
  </polymer-element>
  
  <polymer-element name="x-overlay">
    <template>
      <content id="overlayContent"></content>
    </template>
    <script>
      Polymer('x-overlay');
    </script>  
  </polymer-element>
    
  <polymer-element name="x-menu-button">
    <template>
      <x-overlay id="overlay">
        <div id="menuButtonDiv">
          <x-menu id="menu">
            <content id="menuButtonContent"></content>
          </x-menu>
        </div>
      </x-overlay>
    </template>
    <script>
      Polymer('x-menu-button');
    </script>
  </polymer-element>
  
  <script>
    document.addEventListener('WebComponentsReady', function() {
      setTimeout(function() {
        item1 = document.querySelector('#item1');
        menuButton = document.querySelector('#menuButton');
        menu = menuButton.$.menu;

        path = [
          item1,
          menuButton.$.menuButtonContent,
          menu.$.selectorContent,
          menu.$.selectorDiv,
          menu.$.menuShadow.olderShadowRoot,
          menu.$.menuShadow,
          menu.$.menuDiv,
          menu.webkitShadowRoot,
          menu,
          menuButton.$.menuButtonDiv,
          menuButton.$.overlay.$.overlayContent,
          menuButton.$.overlay.webkitShadowRoot,
          menuButton.$.overlay,
          menuButton.webkitShadowRoot,
          menuButton
        ];
console.log(path)
        var x = 0;
        path.forEach(function(n, i) {
          n.addEventListener('x', function(e) {
            //console.log(e.currentTarget.id, x, i);
            chai.assert.equal(e.currentTarget.id, n.id, 'menu current target is as expected');
            chai.assert.equal(x++, i, 'event listener order is correct');
            if (i == path.length-1) {
              done();
            }
          });
        });

        item1.dispatchEvent(new Event('x', {bubbles: true}));
      }, 0);
    })
  </script>
  </body>
</html>
